<template>
  <div id="addgoods">
    <el-dialog
      title="添加商品"
      :visible.sync="isShow.sta"
      width="100%"
      :before-close="handleClose"
      fullscreen
    >
      <!-- 选项卡 -->
      <el-tabs v-model="defa">
        <el-tab-pane label="基础信息" name="first">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="一级分类">
              <el-select
                v-model="form.first_cateid"
                placeholder="请选择添加菜单"
                @change="firstChange"
              >
                <el-option :label="first.catename" :value="first.id" v-for=" first in points_list " :key="first.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="二级分类">
              <el-select
                v-model="form.second_cateid"
                placeholder="请选择添加菜单"
              >
                <el-option :label="firsts.catename" :value="firsts.id" v-for=" firsts in SecondFirst " :key="firsts.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="form.goodsname"></el-input>
            </el-form-item>
            <el-form-item label="零售价格">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="市场价格">
              <el-input v-model="form.market_price"></el-input>
            </el-form-item>
            <el-form-item label="商品图片">
              <el-upload
                class="avatar-uploader"
                action=""
                :on-change="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="规格名称">
              <el-select v-model="form.specsid" placeholder="请选择添加菜单" @change="secondChange">
                <el-option :label="second.specsname" :value="second.id" v-for=" second in shuxingFirst " :key="second.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="规格属性">
              <el-select v-model="form.specsattr" placeholder="请选择添加菜单">
                <el-option :label="seconds" :value="seconds" v-for=" seconds in shuxingSecond " :key="seconds"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="是否热卖">
              <el-radio-group v-model="form.ishot">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="是否新品">
              <el-radio-group v-model="form.isnew">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 取消以及确定按钮 -->

            <el-form-item style="text-align: right">
              <el-button @click="handleClose">取消</el-button>
              <el-button type="primary" @click="sbmit">提交</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- wangfil 富文本 -->
        <el-tab-pane label="商品详情" name="second">
          <div id="wang">
            <wang style="width: 100%; height: 500px" id="description" ref="wang_text"></wang>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import wang from "vue-wangeditor";
import { mapActions, mapState } from 'vuex';
export default {
  data() {
    return {
      defa: "first",
      form: {
        id: 0,
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        isnew: 2,
        ishot: 2,
        specsattr: "",
        specsid: "",
        market_price: "",
        price: "",
        description: "",
        img: "",
        status: 0,
      },
      SecondFirst:[],
      shuxingFirst:[],
      shuxingSecond:[],
      imageUrl: "",
    };
  },
  created(){
  this.PointsActions()
  this.shuxing()
  },
  computed:{
    ...mapState({'points_list':state=>state.PointsStore.points_list})
  },
  methods: {
    //   点击提交提交数据
    xiugailist(obj){
       console.log(obj);
       this.form=obj
       this.imageUrl=this.lujing+this.form.img
       setTimeout(() => {
           this.$refs.wang_text.setHtml(obj.description)
       }, 200);
    },
      sbmit(){

        this.form.description=this.$refs.wang_text.getHtml()
        var setDate = new FormData()
        for(let i in this.form){
            setDate.append(i,this.form[i])
        }
        let url ='/api/goodsadd'
        if(this.form.id !=0){
            url='/api/goodsedit'
        }
        this.$http.post(url,setDate).then(res=>{
            if(res.code==200){
                console.log(res,'///////////////');
                this.handleClose(),
                this.$emit('chongqi')
            }
        })

      },
      firstChange(id){
         this.points_list.forEach(obj => {
             if(obj.id==id){
                 this.SecondFirst=obj.children
                 return ''
             }
             
         });
      }, 
      secondChange(id){
          this.shuxingFirst.forEach(obj=>{
              console.log(obj,id);
              if(obj.id==id){
                 this.shuxingSecond=obj.attrs
                 return ''
              }
              
          })
      },
    //   获取属性的数据
      shuxing(){
        this.$http.get('/api/specslist').then(res=>{
            if(res.code==200){
               this.shuxingFirst=res.list
               console.log(this.shuxingFirst);
            }
        })
      },
      ...mapActions('PointsStore',['PointsActions']),
    handleAvatarSuccess(file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.img = file.raw;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //    清空数据函数
    handleClose() {
      //   让当前模态框隐藏
      this.$refs.wang_text.setHtml('')
      this.isShow.sta = false;
      this.imageUrl = "";
      this.form = {
        id: 0,
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        isnew: 2,
        ishot: 2,
        specsattr: "",
        specsid: "",
        market_price: "",
        price: "",
        description: "",
        img: "",
        status: 0,
      };
    },
  },
  props: ["isShow"],
  components: {
    wang,
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>